<template>
    <div class="comment_box">
        <div class="comment_tip">
            <span><i class="el-icon-warning-outline"></i>留言说明： </span>
            <p>务必填写有效的邮箱地址，否则不会收到回复信息的~</p>
            <el-divider></el-divider>
        </div>

        <div class="comment_form">
            <el-form :model="commentForm" ref="commentFormRef" label-width="50px">
                <el-row :gutter="10">
                    <el-col :span=12>
                        <el-form-item label="昵称" prop="name">
                            <el-input v-model="commentForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=12>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="commentForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="内容" prop="content">
                    <el-input v-model="commentForm.content" type="textarea" rows="10"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit()">提交</el-button>
                    <el-button @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
export default {
  data () {
    return {
      // 留言表单
      commentForm: {
        name: '',
        email: '',
        content: ''
      }
    }
  },
  methods: {
    submit () {
      this.$message.success('留言成功!')
    },
    reset () {
      this.$refs.commentFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.comment_box{
     box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
     margin: 0 7%;
     padding: 3% 2%;

    .comment_tip{
        span{
            i{
                margin-right: 3px;
                color: red;
                font-weight: bold;
            }
        }
        p{
            margin-top: 1%;
        }
        .el-divider{
            height: 0.5px;
        }
    }

    .comment_form{

    }
}

</style>
